<template>
    <el-card :body-style="{ padding: '0px' }">
        <template #header>
            <div class="card-header">
                <span>发布商品</span>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100% ;">
            <el-table-column prop="id" label="ID" width="90" />
            <el-table-column width="520">
                <template #default="scope">
                    <el-table :data="tableData[scope.$index].goodsList" border>
                        <el-table-column label="商品图片" width="120">
                            <template #default="scope">
                                <el-image style="width: 100px; height: 100px" :src="scope.row.img_md" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="名称" width="180" />
                        <el-table-column prop="goods_price" label="单价" />
                        <el-table-column prop="goods_num" label="数量" />
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column prop="payment" label="付款总额" />
            <el-table-column prop="create_time" label="下单时间" width="180" />
            <el-table-column prop="status" label="状态" width="180" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="larger" type="primary">Edit</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>
<script setup>
import { ref } from 'vue'
import order from '@/api/order'
let form = ref({});
let tableData = ref([])
let loadList = async () => {
    let { status, msg, data } = await order.list();

    tableData.value = data
    // console.log(tableData.value[0].goodsList);
}
loadList();

</script>
<style scoped>
</style>